<template>
	<!-- 巡检任务制定与分配 -->
	<div>
		<div id="app" class="container">
		  <!--查询模块-->
		<div class="row" >
		  <div class="col-12 text-right">
		    <form class="form-group form-inline justify-content-end">
			<div class="row mb-12">
			  <div class="col-md-4">
			    <span>任务编号</span>
			    <input class="form-control" type="search" v-model="psInspectiontaskMain.inspectiontaskcode" placeholder="请输入查询字符">
			  </div>
			  <div class="col-md-4">
			    <span>线路编号</span>
			    <input class="form-control" type="search" v-model="psInspectiontaskMain.linecode" placeholder="">
			  </div>
			  <div class="col-md-4">
			    <span>任务状态</span>
			    <select class="form-control" v-model="psInspectiontaskMain.taskstatus">
			      <option value="-1" selected>--请选择--</option>
			      <option v-for="item in psSystemconfig" :value="item.configvalueid" :key="item.id"   >{{ item.configvaluename }}</option>
			    </select>
			  </div>
			  <div class="col-md-4">
			    <span>发现人</span>
			    <input class="form-control" type="search" v-model="psInspectiontaskMain.createdby" placeholder="">
			  </div>
			  <div class="col-md-4">
			    <span>下发人</span>
			    <input class="form-control" type="search" v-model="psInspectiontaskMain.issuedbyname" placeholder="">
			  </div>
			  <div class="col-md-4">
			    <span>下发时间</span>
			    <input class="form-control" type="datetime-local" v-model="psInspectiontaskMain.issuedtime" placeholder="">
			  </div>
			</div>

			
		    <button class="btn btn-outline-success " @click.prevent="load()">查询</button>
		    <button type="button" class="btn btn-outline-info ml-3"  @click="$router.push('/addInspection')">制定巡检任务</button>
		    </form>
	
		  </div>
		</div>  <!--查询模块结束-->
		        <table  class="table table-striped table-hover table-bordered">
		            <thead>
						<tr>
						               <td v-text="'巡检任务编号'"></td>
						               <td v-text="'巡检任务名称'"></td>
						               <td v-text="'所属线路'"></td>
						               <td v-text="'起始杆号'"></td>
						               <td v-text="'终止杆号'"></td>
						               <td v-text="'下发人'"></td>
						               <td v-text="'任务下发时间'"></td>
						               <td v-text="'任务状态'"></td>
						               <td v-text="'任务完成时间'"></td>
									   <td v-text="'任务是否取消'"></td>
									   <td>操作</td>
						 </tr>
					</thead>
		            <tbody>
						<tr   v-for="o in list" >
						               <td v-text="o.inspectiontaskcode"></td>
						               <td v-text="o.inspectiontaskname"></td>
						               <td v-text="o.linename"></td>
						               <td v-text="o.startpolecode"></td>
						               <td v-text="o.endpolecode"></td>
						               <td v-text="o.issuedbyname"></td>
						               <td v-text="o.issuedtime"></td>
						               <td :style="{color: o.taskstatus === 1 ? 'goldenrod' : (o.taskstatus === 2 ? 'royalblue' : (o.taskstatus === 3 ? 'red' : (o.taskstatus === 4 ? 'green' : '')))}" v-text="o.taskstatusname"></td>
						               <td v-text="o.finishtime"></td>
									   <td :style="{color: o.iscancel == 0 ? 'green' : (o.taskstatus == 1 ? 'red' : 'black')}">{{ o.iscancel == 0 ? '否' : '是' }}</td>
									   <td>
										   <div v-if="o.iscancel!=0">
											   <button type="button" v-if="o.taskstatus==1 || o.taskstatus==2 || o.taskstatus==3 || o.taskstatus==4" @click="$router.push({ path: '/InfoInspection', query: { ps_Id: o.ps_Id } })" class="btn btn-outline-primary" >查看</button>
											   										  
										   </div>
										   <div v-else>
											   <button type="button" v-if="o.taskstatus == 1 || o.taskstatus == 2 || o.taskstatus == 3 || o.taskstatus == 4" @click="$router.push({ path: '/InfoInspection', query: { ps_Id: o.ps_Id } })" class="btn btn-outline-primary">查看</button>
											   <button type="button" v-if="o.taskstatus==1" @click="showModal(o.ps_Id,o.inspectiontaskcode)" class="btn btn-outline-primary" >分配任务</button>
											   <button type="button" v-if="o.taskstatus==1" class="btn btn-outline-primary" @click="$router.push({path:'/updateInspection',query:{obj:o}})">修改</button>
											   <button type="button" v-if="o.taskstatus==1 || o.taskstatus==2" class="btn btn-outline-primary" @click="Cancel(o.ps_Id)">取消</button>
											   
											   <div class="col-md-6">
											   			    <el-dialog
											   			      title="选择巡检员"
											   			      :visible.sync="modalVisible"
											   			      width="50%"
											   			      :before-close="handleClose"
											   			    >
											   			      <el-transfer
											   			       v-model="value"
											   			        :props="{
											   					  id:'id',
											   			          key: 'inspectorcode',
											   			          label: 'inspectorname'
											   			        }"
											   					:titles="['待选巡检员', '已选巡检员']"
											   			        :data="TransferList"
											   			      >
											   			      </el-transfer>
											   			
											   			      <span slot="footer" class="dialog-footer">
											   			        <el-button @click="handleClose">取消</el-button>
											   			        <el-button type="primary" @click="handleSave()">保存</el-button>
											   			      </span>
											   			    </el-dialog>
											   </div>
										   </div>
										   
									   </td>
						</tr>
					</tbody>
		        </table>
				
		         <!--分页-->
		        <!--显示分页信息-->
		        <div class="row  text-right">
		            <!--文字信息-->
		            <div class="col-md-6">
		                当前第 <input name="startPage"  :value="pageInfo.pageNum"  style="width: 20px"/>/{{pageInfo.pages}}页.一共 {{pageInfo.total}}条记录
		            </div>
		            <!--点击分页-->
		            <div class="col-md-6">
		                <nav aria-label="Page navigation example">
		                    <ul class="pagination">
		                        <li class="page-item"><a class="page-link" href="javascript:;" @click="pageInfo.pageNum=1;load( )">首页</a></li>
		                        <li class="page-item" :class="{'disabled':!pageInfo.hasPreviousPage}">
		                            <a class="page-link" href="javascript:;" @click="pageInfo.pageNum=pageInfo.pageNum-1;load()" aria-label="Previous">
		                                <span aria-hidden="true">&laquo;</span>
		                            </a>
		                        </li>
		                        <li class="page-item" v-for="p in pageInfo.navigatepageNums" :class="{'active':pageInfo.pageNum==p}"><a class="page-link"  href="javascript:;" @click="pageInfo.pageNum=p;load()" v-text="p"></a></li>
		                        <li class="page-item" :class="{'disabled':!pageInfo.hasNextPage}">
		                            <a class="page-link" href="javascript:;"  @click="pageInfo.pageNum=pageInfo.pageNum-0+1;load()" aria-label="Next">
		                                <span aria-hidden="true">&raquo;</span>
		                            </a>
		                        </li>
		                        <li class="page-item"><a class="page-link"  href="javascript:;" @click="pageInfo.pageNum=pageInfo.pages;load()">尾页</a></li>
		                    </ul>
		                </nav>
		            </div>
		        </div>
		        <!--分页结束-->
		</div>
	</div>
</template>

<script>
	import {psInspectiontaskMain,queryByIsCancel,queryByDetail,updateQueryByDetail,updatePsInspectiontaskMain} from '../../config/request.js' 
	export default {
		data(){
		    return  {
		       psInspectiontaskMain:{
		       taskstatus:'-1',
		       pageNum:'1',
		       pageSize:'5' 
		    },
		       list:[],
		       pageInfo:{},
			psSystemconfig:{},
			value: [], // 双向绑定的值
			TransferList: [], // Transfer 数据源
			modalVisible: false ,// 控制模态框显示隐藏
			addqueryByDetail:{},
			addqueryByDetailObj:{}, 
			incode:0,// 巡检任务编号
			inid:0,// 巡检任务id
			updateObj:{} ,// 修改对象,
			updateIscancelObj:{},// 修改是否取消 状态
		}
	},methods:{
	    load(){
	        this.psInspectiontaskMain.pageNum=this.pageInfo.pageNum;
				psInspectiontaskMain(this.psInspectiontaskMain).then(json=>{
					this.pageInfo=json.data.pageInfo;
					this.list=json.data.pageInfo.list;
				});
				queryByIsCancel().then(json=>{
					this.psSystemconfig=json.data.queryIsCancel
				})
				
				
	         
	    },
		  showModal(id,inspectiontaskcode) {
			  console.log(inspectiontaskcode)
			  console.log(id)
			this.incode=inspectiontaskcode;
			this.inid=id;
			queryByDetail().then(json=>{
				this.TransferList=json.data.queryByDetail
			})
			  // 模态框
			this.modalVisible = true;
		},
		handleClose(done) {
			// 模态框
			// 可以在这里进行取消操作
			this.modalVisible = false;
			done(); // 关闭模态框
		},
		handleSave() {
			// 保存 transfer  的信息
			// 处理保存逻辑
			    // 获取所选的 value 和 desc
			    const selectedItems = this.TransferList.filter(item => this.value.includes(item.inspectorcode));
			    console.log('保存选择的内容:', selectedItems);
				
				 // 将选中的巡检员信息添加到数组中
				    const selectedInspectors = [];
				    selectedItems.forEach(item => {
						this.iname+=item.inspectorname+','
				        const inspector = {
							id:item.id,
				            inspectorcode: item.inspectorcode,
				            inspectorname: item.inspectorname
				        };
				        selectedInspectors.push(inspector);
				    });
				
					
				    // 将选中的巡检员信息赋给 addqueryByDetail 对象
				    this.addqueryByDetail = selectedInspectors;
					console.log(this.addqueryByDetail)
					// 将所选的 desc 值赋给 psInspectiontaskMain.issuedByName
					
					this.addqueryByDetail.forEach(item=>{
						this.addqueryByDetailObj.taskid= this.incode
						this.addqueryByDetailObj.id=item.id
						
						console.log(this.addqueryByDetailObj)
						updateQueryByDetail(this.addqueryByDetailObj).then(json=>{
							
							this.updateObj.ps_Id=this.inid
							this.updateObj.taskstatus=2
							this.updateObj.taskstatusname='已分配'
							console.log(this.updateObj)
							updatePsInspectiontaskMain(this.updateObj).then(json=>{
									/* alert(json.message) */
									
							})
							
						})
						 // 延迟一秒后执行销毁操作
						    setTimeout(() => {
						        this.$destroy(); // 销毁组件实例
						    }, 1000); // 延迟 1000 毫秒（即 1 秒）
							
					})
					
					this.modalVisible = false; // 关闭模态框
					this.$router.push("/InspectionTask"); 
					
		},
		// 取消按钮 修改 是否取消 状态
		Cancel(ps_Id){
			let flag = confirm("确定要取消？");
			if(flag){
				this.updateIscancelObj.ps_Id=ps_Id
				this.updateIscancelObj.iscancel=1
				updatePsInspectiontaskMain(this.updateIscancelObj).then(json=>{
					alert(json.message)
				})
			}
		}
		
	},mounted(){
	    this.load();
	}
}
</script>

<style>
</style>